<template>
  <DefaultLayout>
    <div class="w-62% m-auto">
      
    <div class="h-1"></div>
    <div class="m-auto mt-12 w-60%">
      <n-input-group>
        <n-input round size="large" v-model:value="searchText" placeholder="搜索职位、企业"></n-input>
        <n-button type="primary" size="large" round @click="search">搜索</n-button>
      </n-input-group>
    </div>
    <!-- 岗位速递 -->
    <div class="mt-36">
      <div class="flex mb-10">
        <span class="m-auto text-32 font-600" style="color: #222">岗位速递</span>
      </div>
      <n-flex justify="space-between" :size="[10, 20]">
        <n-card
          v-for="item in recommendationJobs"
          class="w-32%"
          style="border-radius: 10px"
          :bordered="false"
          :segmented="{
            footer: 'soft',
          }"
        >
          <a :href="'/job/' + item.job_id" target="_blank">
            <n-flex class="mt-5 text-18 color-primary">
              <n-ellipsis style="max-width: 60%">
                {{ item.title }}
              </n-ellipsis>
              <n-text class="ml-auto color-#ff6400">
                {{ item.salary_min }}-{{ item.salary_max }}K
              </n-text>
            </n-flex>
            <n-flex class="mt-5 text-12 color-#999">
              <n-text style="color: #999">
                {{ getCity(item.address_code) }}
              </n-text>
              |
              <n-text style="color: #999">
                {{ getJobName(item.job_code) }}
              </n-text>
            </n-flex>
            <n-flex class="mt-5">
              <n-tag
                v-for="t in item.job_tags"
                size="small"
                :bordered="false"
                :color="{ color: '#f8f8f8', textColor: '#8d92a1', borderColor: '#fff' }"
              >
                {{ t }}
              </n-tag>
            </n-flex>
          </a>
          <template #footer>
            <a :href="'/company/' + item.company_id" target="_blank">
              <n-flex align="center">
                <n-avatar :src="item.company_icon" />
                <n-flex vertical :size="0">
                  <n-text>
                    {{ item.company_name }}
                  </n-text>
                  <n-flex class="text-12">
                    <n-text style="color: #999">
                      {{ getIndustriesName(item.industry_code) }}
                    </n-text>
                    <n-text style="color: #999">
                      {{ getCompanySize(item.size) }}
                    </n-text>
                  </n-flex>
                </n-flex>
              </n-flex>
            </a>
          </template>
        </n-card>
      </n-flex>
    </div>
    <!-- 企业推荐 -->
    <div class="mt-36">
      <div class="flex mb-10">
        <span class="m-auto text-32 font-600" style="color: #222">企业推荐</span>
      </div>
      <n-flex justify="space-between" :size="[10, 20]">
        <n-card
          v-for="item in recommendationCompanies"
          class="w-32%"
          style="border-radius: 10px"
          :bordered="false"
          :segmented="{
            footer: 'soft',
          }"
        >
          <a :href="'/company/' + item.company_id" target="_blank">
            <n-flex align="center">
              <n-avatar :src="item.company_icon" :size="48" />
              <n-flex vertical :size="0">
                <n-ellipsis class="text-18 color-primary">
                  {{ item.company_name }}
                </n-ellipsis>
                <n-flex class="text-12">
                  <n-text style="color: #999">
                    {{ getIndustriesName(item.industry_code) }}
                  </n-text>
                  <n-text style="color: #999">
                    {{ getCompanySize(item.size) }}
                  </n-text>
                </n-flex>
              </n-flex>
            </n-flex>
          </a>
          <template #footer>
            <a v-for="jobsList in item.jobs" :href="'/job/' + jobsList.job_id" target="_blank">
              <n-flex class="mt-5 text-14">
                <n-ellipsis style="max-width: 60%">
                  {{ jobsList.title }}
                </n-ellipsis>
                <n-text class="ml-auto color-#ff6400">
                  {{ jobsList.salary_min }}-{{ jobsList.salary_max }}K
                </n-text>
              </n-flex>
              <n-flex class="mt-5 text-12 color-#999">
                <n-text style="color: #999">
                  {{ getCity(jobsList.address_code) }}
                </n-text>
                |
                <n-text style="color: #999">
                  {{ getJobName(jobsList.job_code) }}
                </n-text>
              </n-flex>
            </a>
          </template>
        </n-card>
      </n-flex>
    </div>
    <!-- 分类查找 -->
    <div class="mt-36">
      <div class="flex mb-10">
        <span class="m-auto text-32 font-600" style="color: #222">分类查找</span>
      </div>
      <n-card style="border-radius: 20px">
        <n-tabs placement="left" style="max-height: 360px">
          <n-tab-pane v-for="l0 in jobs.level0" :name="l0.label" :tab="l0.label">
            <n-scrollbar>
              <n-flex :size="[15, 10]">
                <n-button v-for="l1 in jobs.level1[l0.id]" @click="handleJobSearch(l1.job_code)">
                  {{ l1.label }}
                </n-button>
              </n-flex>
            </n-scrollbar>
          </n-tab-pane>
        </n-tabs>
      </n-card>
    </div>
    </div>
  </DefaultLayout>
</template>

<script setup>
import DefaultLayout from '@/layouts/default/index.vue'
import { jobs, getCity, getJobName, getIndustriesName, getCompanySize } from '@/data'
import { useSeekerStore } from '@/store'
import seekerApi from '@/api/seeker'
import { useRouter } from 'vue-router';
const router = useRouter()
const seekerStore = useSeekerStore()

const searchText = ref()

//推荐岗位列表
const recommendationJobs = ref([])
//推荐企业列表
const recommendationCompanies = ref([])

//获取推荐职位
async function getJobs() {
  if (seekerStore.seeker !== null) {
    let res = await seekerApi.getRecommendJobs(seekerStore.seeker.seeker_id,9)
    recommendationJobs.value = res.data
  } else {
    let res = await seekerApi.getCommonRecommendJobs(9)
    recommendationJobs.value = res.data
  }
}

//获取热门企业
async function getComapnies() {
  if (seekerStore.seeker !== null) {
    let res = await seekerApi.getRecommendCompanies(seekerStore.seeker.seeker_id,9)
    recommendationCompanies.value = res.data
  } else {
    let res = await seekerApi.getCommonRecommendCompanies(9)
    recommendationCompanies.value = res.data
  }
}

onMounted(() => {
  getJobs()
  getComapnies()
})

function search() {
  router.push('/search?key='+searchText.value)
}

function handleJobSearch(job_code) {
  router.push('/search?job_code='+job_code)
}

</script>
